<%@ page import="org.clipjoint.entity.Game" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <script type="text/javascript" src="${ bp }/static/echarts-5.0.1/echarts.min.js"></script>
</head>

<body>

<div class="layui-container">

    <div class="layui-inline" style="margin-top: 10px;margin-left: 300px">
        <label class="layui-form-label">选择月份</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="month" placeholder="yyyy-MM">
        </div>
    </div>

    <div id="chart" style="height: 500px;"></div>

</div>

<script type="text/javascript" src="${ bp }/static/layui/layui.all.js"></script>
<script type="text/javascript">
    layui.use(['jquery', 'laydate'], function () {
        let $ = layui.jquery;
        let laydate = layui.laydate;

        // 获取当前月份
        let now = new Date();
        let month = now.getFullYear() + "-" + ((now.getMonth() + 1 + '').length === 1 ? '0' + (now.getMonth() + 1 + '') : (now.getMonth() + 1 + ''));

        // 初始化echarts实例
        let chart = echarts.init(document.getElementById('chart'));

        // x轴日期
        let days = [];

        // y轴游戏数
        let counts = [];

        // ajax请求接口获取数据
        function getData() {
            $.ajax({
                url: '${ bp }/gameadmin?method=createTimeStat',
                type: 'post',
                // 使用同步请求
                async: false,
                data: {
                    date: month
                },
                dataType: 'json',
                success: (result) => {
                    days = result.data.days;
                    counts = result.data.counts;
                },
                error: () => {
                    console.log('请求失败！');
                }
            });
        }

        // 初始获取数据
        getData();

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '一个月内游戏数据发布数量统计'
            },
            toolbox: {
                feature: {
                    magicType: {
                        type: ['line', 'bar']
                    },
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                },
                {
                    type: 'slider'
                }
            ],
            xAxis: {
                data: days
            },
            yAxis: {},
            series: [{
                name: '游戏数',
                type: 'bar',
                data: counts,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(option);

        // 年月选择器
        laydate.render({
            elem: '#month',
            type: 'month',
            value: month,
            done: function (value, date, endDate) {
                month = value;
                getData();
                chart.setOption({
                    xAxis: {
                        data: days
                    },
                    series: [{
                        name: '游戏数',
                        type: 'bar',
                        data: counts,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top'
                                }
                            }
                        }
                    }]
                });
            }
        });

    });
</script>

</body>
</html>
